<template>
  <view>
    <u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#ff744d" @change="change"></u-tabs>

    <view class="u-p-24">
      <view class="gap-24">
        <order status="等待买家付款">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns">
            <my-btn class="u-m-l-24" :size="[160, 60, 24]" border="1px solid #000" inline round>取消订单</my-btn>
            <my-btn class="u-m-l-24" :size="[140, 60, 24]" color="#ff744d" border="1px solid #ff744d" inline round
              @click="$goto('/pages/order/wuliu-fukuan')">付款</my-btn>
          </view>
        </order>
      </view>

      <view class="gap-24">
        <order status="待评价">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns">
            <my-btn class="u-m-l-24" :size="[160, 60, 24]" border="1px solid #000" inline round>再次购买</my-btn>
            <my-btn class="u-m-l-24" :size="[140, 60, 24]" color="#ff744d" border="1px solid #ff744d" inline round @click="$goto('/pages/order/comment')">评价</my-btn>
          </view>
        </order>
      </view>

      <view class="gap-24">
        <order status="待收货">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns">
            <my-btn class="u-m-l-24" :size="[160, 60, 24]" border="1px solid #000" inline round>查看物流</my-btn>
            <my-btn class="u-m-l-24" :size="[140, 60, 24]" color="#ff744d" border="1px solid #ff744d" inline round>确认收货</my-btn>
          </view>
        </order>
      </view>

      <view class="gap-24">
        <order status="待评价">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns">
            <my-btn class="u-m-l-24" :size="[160, 60, 24]" border="1px solid #000" inline round>再次购买</my-btn>
            <my-btn class="u-m-l-24" :size="[140, 60, 24]" color="#ff744d" border="1px solid #ff744d" inline round>评价</my-btn>
          </view>
        </order>
      </view>
    </view>
  </view>
</template>

<script>
  import order from './components/order-col.vue'
  export default {
    components: {
      order
    },
    data() {
      return {
        tabs: [{
            name: '待付款'
          },
          {
            name: '待收货'
          },
          {
            name: '待评价'
          },
          {
            name: '退换售后'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">

</style>
